<!DOCTYPE html>
<html lang="zh-CN">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>飞牛桌面管理工具</title>
        <link rel="icon" href="favicon.ico" type="image/x-icon">
        <link href="fonts/font-awesome.min.css" rel="stylesheet">
        <style>
            /* 最高优先级的按钮样式 */
            .edit-btn {
                background: linear-gradient(to right, rgb(37, 99, 235), rgb(30, 64, 175)) !important;
                color: white !important;
                border: 1px solid rgb(96, 165, 250) !important;
                padding: 0.25rem 0.75rem !important;
                border-radius: 0.375rem !important;
                font-weight: 600 !important;
                font-size: 0.875rem !important;
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
                transition: all 300ms !important;
            }
            
            .delete-btn {
                background: linear-gradient(to right, rgb(220, 38, 38), rgb(153, 27, 27)) !important;
                color: white !important;
                border: 1px solid rgb(248, 113, 113) !important;
                padding: 0.25rem 0.75rem !important;
                border-radius: 0.375rem !important;
                font-weight: 600 !important;
                font-size: 0.875rem !important;
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
                transition: all 300ms !important;
                margin-left: 0.5rem !important;
            }
            
            #closeModal, #closeAnnouncementBtn {
                background: linear-gradient(to right, rgb(59, 130, 246), rgb(239, 68, 68)) !important;
                color: white !important;
                width: 2.5rem !important;
                height: 2.5rem !important;
                border-radius: 50% !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                font-size: 1.125rem !important;
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
                transition: all 300ms !important;
                border: none !important;
            }
        </style>
    <style>
        /* 深色科技风格颜色变量 */
        :root {
            --primary: #00a8ff;
            --secondary: #00d2d3;
            --accent: #5f27cd;
            --success: #10ac84;
            --danger: #ee5a24;
            --warning: #feca57;
            --info: #3498db;
            --dark-bg: #152446d3;
            --card-bg: #263a55b7;
            --card-hover: #273449;
            --border-color: #334155;
            --text-primary: #e2e8f0;
            --text-secondary: #94a3b8;
            --shadow-color: rgba(0, 0, 0, 0.3);
            --glow-primary: 0 0 10px rgba(0, 168, 255, 0.5);
            --glow-secondary: 0 0 15px rgba(0, 210, 211, 0.3);
        }
        
        /* 基础样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        html {
            height: 100%;
            scroll-behavior: smooth;
        }
        
        body {
            font-family: 'Rajdhani', 'Segoe UI', 'Roboto', sans-serif;
            background-color: var(--dark-bg);
            color: var(--text-primary);
            line-height: 1.6;
            min-height: 100vh;
            background-image: 
                radial-gradient(circle at 10% 20%, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 1) 90%),
                linear-gradient(to right, rgba(0, 168, 255, 0.03), transparent, rgba(0, 210, 211, 0.03));
            position: relative;
            overflow-x: hidden;
        }
        
        /* 通知提示样式 */
        .notification {
            max-width: 350px;
            min-width: 280px;
            backdrop-filter: blur(8px);
            cursor: pointer;
        }
        
        .notification.success {
            background-color: rgba(16, 172, 132, 0.9);
            border-left: 4px solid var(--success);
        }
        
        .notification.success #notificationIcon {
            color: var(--text-primary);
        }
        
        .notification.error {
            background-color: rgba(238, 90, 36, 0.9);
            border-left: 4px solid var(--danger);
        }
        
        .notification.error #notificationIcon {
            color: var(--text-primary);
        }
        
        .notification.show {
            opacity: 1;
            transform: translate(0);
        }
        
        /* 优化背景效果 */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 50% 50%, rgba(100, 255, 218, 0.05) 0%, rgba(30, 41, 59, 0) 70%);
            z-index: -1;
            pointer-events: none;
        }
        
        /* 主容器 */
        .container {
            width: 100%;
            max-width: 1250px;
            margin: 0 auto;
            padding: 0 1.5rem;
        }
        
        /* 全局优化样式 */
        :root {
            --shadow-color: rgba(0, 0, 0, 0.2);
            --shadow-light: rgba(0, 0, 0, 0.1);
            --shadow-hover: rgba(0, 0, 0, 0.3);
        }
        
        /* 导航栏样式 */
        .navbar {
            background: linear-gradient(90deg, var(--card-bg), var(--dark-bg));
            border-bottom: 1px solid var(--border-color);
            box-shadow: 0 4px 15px var(--shadow-light);
            padding: 1rem 0;
            position: sticky;
            top: 0;
            z-index: 100;
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
        }
        
        .navbar:hover {
            box-shadow: 0 6px 20px var(--shadow-color);
        }
        
        .navbar-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .navbar-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--primary);
            text-shadow: var(--glow-primary);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .navbar-actions {
            display: flex;
            gap: 1rem;
            align-items: center;
        }
        
        /* 按钮样式 */
        .btn {
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: 0.5rem;
            font-size: 0.9rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(4px);
        }
        
        /* 编辑和删除按钮特定样式 */
        .edit-btn, .delete-btn {
            /* 确保按钮行为正常 */
            cursor: pointer;
            position: relative;
            border: none;
            background: transparent;
        }
        
        /* 关闭按钮特定样式 */
        #closeModal, #closeAnnouncementBtn {
            /* 确保按钮行为正常 */
            cursor: pointer;
            position: relative;
            border: none;
            background: transparent;
        }
        
        /* 只对具有btn类的按钮应用伪元素 */
        .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            transition: all 0.5s ease;
        }

        .btn:hover::before {
            left: 100%;
        }
        
        /* 确保我们的特定按钮不被其他规则影响 */
        button:not(.btn) {
            position: relative !important;
            z-index: 2 !important;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            box-shadow: 0 4px 15px rgba(0, 168, 255, 0.3);
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 168, 255, 0.4);
        }
        
        .btn-secondary {
            background: rgba(30, 41, 59, 0.8);
            color: var(--text-primary);
            border: 1px solid var(--border-color);
        }
        
        .btn-secondary:hover {
            background: var(--card-hover);
            border-color: var(--primary);
            color: var(--primary);
            box-shadow: var(--glow-primary);
        }
        
        .btn-danger {
            background: linear-gradient(135deg, var(--danger), #ff6b35);
            color: white;
            box-shadow: 0 4px 15px rgba(238, 90, 36, 0.3);
        }
        
        .btn-danger:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(238, 90, 36, 0.4);
        }
        
        /* 科技黄按钮 - 用于公告说明 */
        .btn-warning {
            background: linear-gradient(135deg, var(--warning), #ffd166);
            color: #1e293b;
            box-shadow: 0 4px 15px rgba(254, 202, 87, 0.3);
        }
        
        .btn-warning:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(254, 202, 87, 0.4);
        }
        
        /* 科技蓝按钮 - 用于立即生效 */
        .btn-info {
            background: linear-gradient(135deg, var(--info), #2980b9);
            color: white;
            box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
        }
        
        .btn-info:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
        }
        
        /* 科技绿按钮 - 用于添加记录 */
        .btn-success {
            background: linear-gradient(135deg, var(--success), #0e8966);
            color: white;
            box-shadow: 0 4px 15px rgba(16, 172, 132, 0.3);
        }
        
        .btn-success:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(16, 172, 132, 0.4);
        }
        
        .btn-sm {
            padding: 0.5rem 1rem;
            font-size: 0.8rem;
        }
        
        .btn-lg {
            padding: 0.875rem 2rem;
            font-size: 1rem;
        }
        
        /* 卡片样式 */
        .card {
            background: var(--card-bg);
            border-radius: 0.75rem;
            border: 1px solid var(--border-color);
            box-shadow: 0 6px 20px var(--shadow-light);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px var(--shadow-hover), var(--glow-primary);
            border-color: var(--primary);
        }
        
        .card::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), var(--glow-primary);
            border-color: var(--primary);
        }
        
        .card:hover::after {
            opacity: 1;
        }
        
        .card-content {
            padding: 1.5rem;
        }
        
        /* 筛选区域 */
        .filter-section {
            background: var(--card-bg);
            border-radius: 0.75rem;
            border: 1px solid var(--border-color);
            padding: 1.5rem;
            margin-bottom: 2rem;
            box-shadow: 0 6px 20px var(--shadow-light);
            transition: box-shadow 0.3s ease;
        }
        
        .filter-section:hover {
            box-shadow: 0 8px 25px var(--shadow-color);
        }
        
        .filter-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 1.5rem;
            margin-bottom: 1.5rem;
        }
        
        .filter-footer {
            display: flex;
            justify-content: flex-end;
            gap: 1rem;
        }
        
        /* 输入框样式 */
        .input-group {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
        
        /* 网格布局 */
        .grid {
            display: grid;
        }
        
        .grid-cols-1 {
            grid-template-columns: repeat(1, minmax(0, 1fr));
        }
        
        .grid-cols-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        
        .grid-cols-3 {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        
        .gap-6 {
            gap: 1.5rem;
        }
        
        .mb-6 {
            margin-bottom: 1.5rem;
        }
        
        /* 响应式布局 */
        @media (min-width: 768px) {
            .md\:grid-cols-2 {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            
            .md\:grid-cols-3 {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }
        
        .input-group label {
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        
        input, select {
            background: rgba(15, 23, 42, 0.5);
            border: 1px solid var(--border-color);
            border-radius: 0.5rem;
            padding: 0.75rem 1rem;
            color: var(--text-primary);
            font-size: 0.9rem;
            transition: all 0.3s ease;
            backdrop-filter: blur(4px);
        }
        
        input:focus, select:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: var(--glow-primary);
            background: rgba(15, 23, 42, 0.7);
        }
        
        input::placeholder {
            color: var(--text-secondary);
        }
        
        /* 表格样式 */
        .table-container {
            background: var(--card-bg);
            border-radius: 0.75rem;
            border: 1px solid var(--border-color);
            overflow: hidden;
            box-shadow: 0 6px 20px var(--shadow-light);
            margin-bottom: 2rem;
            transition: box-shadow 0.3s ease;
        }
        
        .table-container:hover {
            box-shadow: 0 8px 25px var(--shadow-color);
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
        }
        
        th {
            background: linear-gradient(90deg, rgba(30, 41, 59, 0.8), rgba(30, 41, 59, 0.5));
            color: var(--text-secondary);
            font-size: 0.8rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            padding: 1rem;
            text-align: left;
            border-bottom: 1px solid var(--border-color);
        }
        
        td {
            padding: 1rem;
            border-bottom: 1px solid var(--border-color);
            transition: background-color 0.2s ease;
        }
        
        tr:hover td {
            background: rgba(30, 41, 59, 0.5);
        }
        
        tr:last-child td {
            border-bottom: none;
        }
        
        /* 分页样式 */
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.5rem;
            padding: 1.5rem;
            background: var(--card-bg);
            border-top: 1px solid var(--border-color);
        }
        
        .pagination-btn {
            min-width: 68px;
            height: 42px;
            border-radius: 0.5rem;
            border: 1px solid var(--border-color);
            background: rgba(15, 23, 42, 0.5);
            color: var(--text-primary);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        
        .pagination-btn:hover:not(:disabled) {
            border-color: var(--primary);
            background: var(--card-hover);
            color: var(--primary);
            box-shadow: var(--glow-primary);
        }
        
        .pagination-btn.active {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            border-color: var(--primary);
            color: white;
            box-shadow: var(--glow-primary);
        }
        
        .pagination-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        /* 模态框样式 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            backdrop-filter: blur(5px);
        }
        
        .modal {
            background: var(--card-bg);
            border-radius: 0.75rem;
            border: 1px solid var(--border-color);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), var(--glow-secondary);
            max-width: 680px;
            min-width: 360px;
            width: 90%;
            max-height: 90vh;
            overflow-y: auto;
            animation: modalSlideIn 0.3s ease-out;
            position: relative;
        }
        
        @keyframes modalSlideIn {
            from {
                opacity: 0;
                transform: translateY(-30px) scale(0.95);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
        
        .modal-header {
            padding: 1.5rem;
            border-bottom: 1px solid var(--border-color);
            background: linear-gradient(90deg, var(--card-bg), var(--dark-bg));
            border-radius: 0.75rem 0.75rem 0 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .modal-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--primary);
            text-shadow: var(--glow-primary);
        }
        
        .modal-body {
            padding: 1.5rem;
        }
        
        .modal-footer {
            padding: 1.5rem;
            border-top: 1px solid var(--border-color);
            display: flex;
            justify-content: flex-end;
            gap: 1rem;
        }
        
        /* 通知样式 */
        .notification {
            position: fixed;
            top: 2rem;
            right: 2rem;
            padding: 1rem 1.5rem;
            border-radius: 0.5rem;
            color: white;
            z-index: 2000;
            animation: slideInRight 0.5s ease-out;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(10px);
        }
        
        @keyframes slideInRight {
            from {
                opacity: 0;
                transform: translateX(100%);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        .notification-success {
            background: linear-gradient(90deg, var(--success), #10ac84);
            box-shadow: 0 10px 30px rgba(16, 172, 132, 0.3);
        }
        
        .notification-error {
            background: linear-gradient(90deg, var(--danger), #ff6b35);
            box-shadow: 0 10px 30px rgba(238, 90, 36, 0.3);
        }
        
        /* 标签样式 */
        .tag {
            display: inline-flex;
            align-items: center;
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.8rem;
            font-weight: 500;
            background: rgba(0, 168, 255, 0.1);
            color: var(--primary);
            border: 1px solid rgba(0, 168, 255, 0.3);
        }
        
        /* 加载动画 */
        .loader {
            width: 40px;
            height: 40px;
            border: 3px solid rgba(0, 168, 255, 0.2);
            border-radius: 50%;
            border-top-color: var(--primary);
            animation: spin 1s ease-in-out infinite;
            margin: 2rem auto;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .container {
                padding: 0 1rem;
            }
            
            .navbar-content {
                flex-direction: column;
                gap: 1rem;
            }
            
            .navbar-actions {
                flex-wrap: wrap;
                justify-content: center;
            }
            
            .filter-grid {
                grid-template-columns: 1fr;
            }
            
            .filter-footer {
                flex-direction: column-reverse;
            }
            
            .modal {
                width: 95%;
                margin: 1rem;
            }
            
            .modal-footer {
                flex-direction: column;
            }
            
            .table-container {
                overflow-x: auto;
            }
            
            table {
                min-width: 600px;
            }
        }
        
        /* 工具类 */
        .flex {
            display: flex;
        }
        
        .items-center {
            align-items: center;
        }
        
        .justify-between {
            justify-content: space-between;
        }
        
        .justify-center {
            justify-content: center;
        }
        
        .gap-2 {
            gap: 0.5rem;
        }
        
        .gap-4 {
            gap: 1rem;
        }
        
        .gap-6 {
            gap: 1.5rem;
        }
        
        .mb-4 {
            margin-bottom: 1rem;
        }
        
        .mb-6 {
            margin-bottom: 1.5rem;
        }
        
        .mt-4 {
            margin-top: 1rem;
        }
        
        .mt-6 {
            margin-top: 1.5rem;
        }
        
        .p-4 {
            padding: 1rem;
        }
        
        .p-6 {
            padding: 1.5rem;
        }
        
        .text-center {
            text-align: center;
        }
        
        .text-right {
            text-align: right;
        }
        
        .w-full {
            width: 100%;
        }
        
        .hidden {
            display: none;
        }
        
        .cursor-pointer {
            cursor: pointer;
        }
        
        .text-sm {
            font-size: 0.875rem;
        }
        
        .text-lg {
            font-size: 1.125rem;
        }
        
        .font-medium {
            font-weight: 500;
        }
        
        .font-semibold {
            font-weight: 600;
        }
        
        .text-primary {
            color: var(--primary);
        }
        
        .text-secondary {
            color: var(--text-secondary);
        }
        
        /* 特效 */
        .glow-text {
            text-shadow: var(--glow-primary);
        }
        
        .glow-border {
            box-shadow: var(--glow-primary);
        }
        
        /* 滚动条样式 */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: var(--dark-bg);
        }
        
        ::-webkit-scrollbar-thumb {
            background: var(--border-color);
            border-radius: 4px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: var(--primary);
        }
        
        /* 加载指示器 */
        .loading-indicator {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--primary);
        }
        
        .loading-indicator::after {
            content: '';
            width: 16px;
            height: 16px;
            border: 2px solid rgba(0, 168, 255, 0.3);
            border-radius: 50%;
            border-top-color: var(--primary);
            animation: spin 0.8s linear infinite;
        }
    </style>
</head>
<body class="min-h-screen font-sans text-text-primary">
    <!-- 顶部导航栏 -->
    <header class="navbar">
        <div class="container navbar-content">
            <h1 class="navbar-title">
                <i class="fa fa-desktop"></i>
                飞牛桌面管理工具 v0.65.1
            </h1>
            <div class="navbar-actions">
                <button id="announcementBtn" class="btn btn-warning mr-2">
                    <i class="fa fa-bullhorn"></i>
                    公告说明
                </button>
                <button id="applyBtn" class="btn btn-success mr-2">
                    <i class="fa fa-check-circle"></i>
                    立即生效
                </button>
                <button id="addBtn" class="btn btn-info mr-2">
                    <i class="fa fa-plus"></i>
                    添加记录
                </button>
                <div class="dropdown" style="position: relative; display: inline-block;">
                    <button id="moreActionsBtn" class="btn btn-danger mr-2 dropdown-toggle">
                        <i class="fa fa-ellipsis-h"></i>
                        更多操作
                    </button>
                    <div id="dropdownMenu" class="dropdown-menu" style="display: none; position: absolute; right: 0; top: 100%; margin-top: 0.125rem; background-color: white; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 0.375rem; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175); min-width: 10rem; padding: 0.5rem 0; z-index: 1000;">
                        <a class="dropdown-item" href="fnstyle.html" id="menuCustomize" style="display: block; width: 100%; padding: 0.5rem 1rem; clear: both; font-weight: 400; color: #212529; text-align: inherit; text-decoration: none; white-space: nowrap; background-color: transparent; border: 0; transition: all 0.15s ease-in-out;">
                            <i class="fa fa-paint-brush mr-2"></i>
                            个性定制
                        </a>
                        <a class="dropdown-item" href="#" id="menuMergeData" style="display: block; width: 100%; padding: 0.5rem 1rem; clear: both; font-weight: 400; color: #212529; text-align: inherit; text-decoration: none; white-space: nowrap; background-color: transparent; border: 0; transition: all 0.15s ease-in-out;">
                            <i class="fa fa-code-fork mr-2"></i>
                            合并数据
                        </a>
                        <a class="dropdown-item" href="#" id="menuResetDesktop" style="display: block; width: 100%; padding: 0.5rem 1rem; clear: both; font-weight: 400; color: #212529; text-align: inherit; text-decoration: none; white-space: nowrap; background-color: transparent; border: 0; transition: all 0.15s ease-in-out;">
                            <i class="fa fa-refresh mr-2"></i>
                            还原桌面
                        </a>
                         <a class="dropdown-item" href="#" id="menuUpdateDesktop" style="display: block; width: 100%; padding: 0.5rem 1rem; clear: both; font-weight: 400; color: #212529; text-align: inherit; text-decoration: none; white-space: nowrap; background-color: transparent; border: 0; transition: all 0.15s ease-in-out;">
                            <i class="fa fa-download mr-2"></i>
                            在线升级
                        </a>
                        <a class="dropdown-item" href="#" id="menuLogout" style="display: block; width: 100%; padding: 0.5rem 1rem; clear: both; font-weight: 400; color: #212529; text-align: inherit; text-decoration: none; white-space: nowrap; background-color: transparent; border: 0; transition: all 0.15s ease-in-out;">
                            <i class="fa fa-sign-out mr-2"></i>
                            退出登录
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- 主内容区域 -->
    <main class="container py-6">
        <!-- 筛选区域 -->
        <div class="filter-section mb-6 bg-card p-4 rounded-lg shadow-sm">
            <div class="filter-grid flex flex-wrap items-center gap-6">
                <!-- 类型筛选 -->
                <div class="filter-item flex items-center">
                    <label for="filterType" class="mr-2 text-text-secondary whitespace-nowrap font-medium">类型</label>
                    <select id="filterType" class="py-2 px-3 border border-border rounded bg-background text-text-primary focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all">
                        <option value="">全部类型</option>
                        <!-- 类型选项将动态生成 -->
                    </select>
                </div>
                
                <!-- 归属筛选 -->
                <div class="filter-item flex items-center">
                    <label for="filterOwner" class="mr-2 text-text-secondary whitespace-nowrap font-medium">归属</label>
                    <select id="filterOwner" class="py-2 px-3 border border-border rounded bg-background text-text-primary focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all">
                        <option value="">全部归属</option>
                        <!-- 归属选项将动态生成 -->
                    </select>
                </div>
                
                <!-- 关键词搜索 - 占据剩余空间 -->
                <div class="filter-item flex-grow flex items-center min-w-[200px]">
                    <label for="filterKeyword" class="mr-2 text-text-secondary whitespace-nowrap font-medium">关键词搜索</label>
                    <div class="relative w-full">
                        <input 
                            type="text" 
                            id="filterKeyword" 
                            placeholder="搜索标题..." 
                            class="w-full py-2 px-3 border border-border rounded bg-background text-text-primary focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all"
                        >
                    </div>
                </div>
                
                <!-- 操作按钮组 -->
                <div class="filter-actions flex items-center gap-6 ml-auto">
                    <button 
                        id="filterBtn" 
                        class="btn btn-primary py-2 px-4 rounded transition-all hover:shadow-lg flex items-center justify-center"
                    >
                        <i class="fa fa-filter mr-1"></i>
                        筛选
                    </button>
                    <button 
                        id="resetFilterBtn" 
                        class="btn btn-secondary py-2 px-4 rounded transition-all hover:shadow-lg flex items-center justify-center"
                    >
                        <i class="fa fa-refresh mr-1"></i>
                        重置
                    </button>
                </div>
            </div>
        </div>

        <!-- 数据表格 -->
        <div class="table-container">
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr>
                            <th id="sortable-order" class="cursor-pointer hover:bg-card-hover">优先级 <i class="fa fa-sort ml-1"></i></th>
                            <th class="hidden">ID</th>
                            <th>标题</th>
                            <th>URL</th>
                            <th>网络 ◀图▶ 本地</th>
                            <th>类型</th>
                            <th>归属</th>
                            <th class="text-center">操作</th>
                        </tr>
                    </thead>
                    <tbody id="dataTableBody">
                        <!-- 数据将通过JavaScript动态加载 -->
                    </tbody>
                </table>
            </div>
            <!-- 分页 -->
            <div class="pagination flex items-center justify-between py-4 px-2">
                <div class="text-sm text-text-secondary">
                    显示 <span id="startItem">0</span> 到 <span id="endItem">0</span> 条，共 <span id="totalItems">0</span> 条
                </div>
                <div class="flex gap-4">
                    <button id="prevPage" class="pagination-btn px-4 py-2 border rounded transition-all hover:bg-card-hover disabled:opacity-50" disabled>
                        上一页
                    </button>
                    <button id="nextPage" class="pagination-btn px-4 py-2 border rounded transition-all hover:bg-card-hover disabled:opacity-50" disabled>
                        下一页
                    </button>
                </div>
            </div>
        </div>
    </main>

    <!-- 添加/编辑模态框 -->
    <div id="editModal" class="modal-overlay hidden">
        <div class="modal">
            <div class="modal-header">
                <h2 id="modalTitle" class="modal-title">添加记录</h2>
                <button id="closeModal">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <form id="editForm">
                    <input type="hidden" id="recordId">
                    
                    <!-- 第一行：句号，类型，归属 -->
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
                        <div class="input-group">
                            <label for="edit序号">序号（越大图标越靠前）</label>
                            <input type="number" id="edit序号" required>
                        </div>
                        <div class="input-group">
                            <label for="edit类型">类型（图标/文件夹）</label>
                            <select id="edit类型" required>
                                <option value="0">图标</option>
                                <option value="1">文件夹</option>
                            </select>
                        </div>
                        <div class="input-group">
                            <label for="edit归属">归属（桌面/其他文件夹）</label>
                            <select id="edit归属" required>
                                <!-- 归属选项将动态生成 -->
                            </select>
                        </div>
                    </div>
                    
                    <script>
                    // 添加类型选择事件监听器，控制URL字段的显示/隐藏
                    function toggleUrlFieldsByType() {
                        const typeSelect = document.getElementById('edit类型');
                        if (!typeSelect) return;
                        
                        const isFolder = typeSelect.value === '1';
                        const publicUrlField = document.getElementById('publicUrlField');
                        const urlFieldsRow1 = document.getElementById('urlFieldsRow1');
                        const urlFieldsRow2 = document.getElementById('urlFieldsRow2');
                        const titleInput = document.getElementById('edit标题');
                        
                        // 当类型为文件夹时隐藏URL相关字段，确保显示时使用正确的display值
                        if (publicUrlField) {
                            // 移除内联样式恢复默认显示
                            if (isFolder) {
                                publicUrlField.style.display = 'none';
                            } else {
                                publicUrlField.style.display = '';
                            }
                        }
                        if (urlFieldsRow1) urlFieldsRow1.style.display = isFolder ? 'none' : 'grid';
                        if (urlFieldsRow2) urlFieldsRow2.style.display = isFolder ? 'none' : 'grid';
                        
                        // 获取当前记录ID，判断是否为新增记录
                        const recordId = document.getElementById('recordId').value;
                        // 如果是新增记录（没有recordId），每次切换类型都更新标题
                        if (titleInput && !recordId) {
                            titleInput.value = isFolder ? '新建文件夹' : '一个新图标';
                        }
                    }
                    
                    // 添加窗口加载完成后的初始化
                    window.addEventListener('DOMContentLoaded', function() {
                        // 定义全局变量存储URL和IP地址
                        window.waiwangURL = '';
                        window.neiwangURL = '';
                        
                        // 获取当前浏览器访问地址的协议和主机名部分（不包含端口号）
                        window.waiwangURL = window.location.protocol + '//' + window.location.hostname;
                        console.log('当前浏览器协议和主机名（外网）:', window.waiwangURL);
                        
                        // 获取内网IP地址的方法（使用WebRTC获取当前使用的网卡IPv4地址）
                        function getLocalIP() {
                            return new Promise((resolve, reject) => {
                                try {
                                    const peerConnection = new RTCPeerConnection({ iceServers: [] });
                                    const noop = () => {};
                                    
                                    peerConnection.createDataChannel('');
                                    
                                    // 监听ICE候选事件
                                    peerConnection.onicecandidate = event => {
                                        if (event.candidate) {
                                            // 从候选地址中提取IP
                                            const ipRegex = /ip=([0-9\.]+)/;
                                            const candidateStr = event.candidate.candidate;
                                            const match = candidateStr.match(ipRegex);
                                            
                                            if (match && match[1]) {
                                                const ip = match[1];
                                                // 检查是否为内网IP
                                                if (/^(10\.|172\.(1[6-9]|2[0-9]|3[01])\.|192\.168\.)/.test(ip)) {
                                                    peerConnection.close();
                                                    resolve(ip);
                                                }
                                            }
                                        }
                                    };
                                    
                                    // 创建offer以触发ICE收集
                                    peerConnection.createOffer({
                                        offerToReceiveAudio: false,
                                        offerToReceiveVideo: false
                                    })
                                    .then(offer => peerConnection.setLocalDescription(offer))
                                    .catch(reject);
                                    
                                    // 设置超时
                                    setTimeout(() => {
                                        peerConnection.close();
                                        reject(new Error('获取IP地址超时'));
                                    }, 3000);
                                } catch (error) {
                                    reject(error);
                                }
                            });
                        }
                        
                        // 调用方法获取内网IP并更新全局变量
                        getLocalIP().then(ip => {
                            window.neiwangURL = ip;
                            console.log('当前浏览器协议和主机名（内网）:', window.neiwangURL);
                        }).catch(error => {
                            console.error('获取内网IP地址失败:', error);
                            window.neiwangURL = '127.0.0.1'; // 默认本地地址
                        });
                        
                        // 添加类型切换事件，实时更新标题默认值
                        // 添加类型切换事件，实时更新标题默认值
                        const typeSelect = document.getElementById('edit类型');
                        if (typeSelect) {
                            // 只保留一个事件监听器
                            typeSelect.addEventListener('change', toggleUrlFieldsByType);
                        }
                        
                        // 查找打开编辑窗口的函数并修改，确保在打开时调用toggleUrlFieldsByType
                        const originalOpenEditModal = window.openEditModal;
                        if (originalOpenEditModal) {
                            window.openEditModal = function(record) {
                                // 调用原始函数
                                originalOpenEditModal(record);
                                
                                const typeSelect = document.getElementById('edit类型');
                                
                                // 立即根据记录类型更新下拉框的值
                                if (record && typeSelect && record.type !== undefined) {
                                    typeSelect.value = record.type;
                                }
                                
                                // 延迟执行以确保DOM已完全更新
                                setTimeout(toggleUrlFieldsByType, 100);
                            };
                        }
                    });
                    </script>
                    
                    <!-- 第二行：标题、公网地址 -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                        <div class="input-group">
                            <label for="edit标题">* 标题（必须填写！）</label>
                            <input type="text" id="edit标题" value="一个新图标" required>
                        </div>
                        <div id="publicUrlField" class="input-group">
                            <label for="edit外网跳转URL">公网地址：（完整的URL地址）</label>
                            <input type="text" id="edit外网跳转URL" placeholder="http:// or https://" value="" onfocus="if(this.value=='') this.value=window.waiwangURL; this.select();">
                        </div>
                    </div>
                    
                    <!-- 第三行：内网地址、备用URL1 -->
                    <div id="urlFieldsRow1" class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                        <div class="input-group">
                            <label for="edit内网跳转URL">内网地址：（识别到内网将跳转到此地址）</label>
                            <input type="text" id="edit内网跳转URL" placeholder="识别到内网将跳转到此地址" value="" onfocus="if(this.value=='') this.value='http://' + window.neiwangURL; this.select();">
                        </div>
                        <div class="input-group">
                            <label for="edit备用URL1">备用URL1</label>
                            <input type="text" id="edit备用URL1" placeholder="http:// or https://">
                        </div>
                    </div>
                    
                    <!-- 第四行：备用URL2、备用URL3 -->
                    <div id="urlFieldsRow2" class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                        <div class="input-group">
                            <label for="edit备用URL2">备用URL2</label>
                            <input type="text" id="edit备用URL2" placeholder="http:// or https://">
                        </div>
                        <div class="input-group">
                            <label for="edit备用URL3">备用URL3</label>
                            <input type="text" id="edit备用URL3" placeholder="http:// or https://">
                        </div>
                    </div>
                    
                    <!-- 第五行：网络图片URL、本地图片URL -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                        <div class="input-group">
                            <label for="edit网络图片URL">网络图片URL（若不填则尝试从URL中获取）</label>
                            <div class="flex gap-2">
                                <input type="text" id="edit网络图片URL" placeholder="不填则尝试从URL中获取" class="flex-1">
                                <button id="autoFetchBtn" type="button" class="btn btn-primary whitespace-nowrap">获取</button>
                            </div>
                        </div>
                        <div class="input-group">
                            <label for="edit本地图片URL">本地图片（自动，若手动填请用英文）</label>
                            <div class="flex gap-2">
                                <input type="text" id="edit本地图片URL" placeholder="不需要填写，除非手动放置图片文件" class="flex-1">
                                <button id="uploadLocalImgBtn" type="button" class="btn btn-primary whitespace-nowrap">上传</button>
                                <input type="file" id="localImgFileInput" accept="image/*" style="display: none;">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <a href="otn.html" class="text-secondary mr-auto" style="margin-right: auto; padding-top: 10px;">
                    <small>合拼旧版数据</small>
                </a>
                <button id="cancelEditBtn" class="btn btn-secondary">
                    取消
                </button>
                <button id="saveBtn" class="btn btn-primary">
                    保存
                </button>
            </div>
        </div>
    </div>

    <!-- 删除确认模态框 -->
    <div id="deleteModal" class="modal-overlay hidden">
        <div class="modal max-w-md">
            <div class="modal-header">
                <h2 class="modal-title">确认删除</h2>
            </div>
            <div class="modal-body">
                <p class="text-text-primary">确定要删除这条记录吗？此操作不可撤销。</p>
                <p id="deleteTitle" class="mt-2 font-medium text-danger"></p>
                <input type="hidden" id="deleteId">
            </div>
            <div class="modal-footer">
                <button id="cancelDeleteBtn" class="btn btn-secondary">
                    取消
                </button>
                <button id="confirmDeleteBtn" class="btn btn-danger">
                    删除
                </button>
            </div>
        </div>
    </div>
    
    <!-- 应用配置确认模态框 -->
    <div id="applyConfigModal" class="modal-overlay hidden">
        <div class="modal max-w-md">
            <div class="modal-header">
                <h2 class="modal-title">确认应用配置</h2>
            </div>
            <div class="modal-body">
                <p class="text-text-primary">确定要立即应用当前配置吗？（飞牛也是牛，请不要频繁点击此按钮）</p>
                <p class="text-text-secondary text-sm mt-2">应用后若没效果请清空浏览器缓存/浏览器按F12在网络里禁用缓存/使用无痕模式浏览</p>
            </div>
            <div class="modal-footer">
                <button id="cancelApplyBtn" class="btn btn-secondary">
                    取消
                </button>
                <button id="confirmApplyBtn" class="btn btn-primary">
                    确认应用
                </button>
            </div>
        </div>
    </div>
    
    <!-- 还原桌面确认模态框 -->
    <div id="resetDesktopModal" class="modal-overlay hidden">
        <div class="modal max-w-md">
            <div class="modal-header">
                <h2 class="modal-title">确认还原桌面</h2>
            </div>
            <div class="modal-body">
                <p class="text-text-primary">确定要还原桌面吗？这将彻底还原成使用本工具之前都得状态。</p>
                <p class="text-text-secondary text-sm mt-2">⚠操作后请到Docker Compose把fndesk项目清理！（不用删除，清理就可以，随时构建数据都在）</p>
                <p class="text-text-secondary text-sm mt-2">⚠还原后若未生效请重启一次系统。</p>
            </div>
            <div class="modal-footer">
                <button id="cancelResetBtn" class="btn btn-secondary">
                    取消
                </button>
                <button id="confirmResetBtn" class="btn btn-primary">
                    确认还原
                </button>
            </div>
        </div>
    </div>
    
    <!-- 退出登录确认模态框 -->
    <div id="logoutModal" class="modal-overlay hidden">
        <div class="modal max-w-md">
            <div class="modal-header">
                <h2 class="modal-title">确认退出登录</h2>
            </div>
            <div class="modal-body">
                <p class="text-text-primary">确定要退出当前登录吗？</p>
                <p class="text-text-secondary text-sm mt-2">退出后需要重新登录才能管理桌面配置。</p>
            </div>
            <div class="modal-footer">
                <button id="cancelLogoutBtn" class="btn btn-secondary">
                    取消
                </button>
                <button id="confirmLogoutBtn" class="btn btn-secondary">
                    确认退出
                </button>
            </div>
        </div>
    </div>
    
    <!-- 公告说明模态框 -->
    <div id="announcementModal" class="modal-overlay hidden">
        <div class="modal max-w-2xl">
            <div class="modal-header">
                <h2 class="modal-title">公告说明</h2>
                <button id="closeAnnouncementBtn">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div id="announcementContent">
                    <!-- 加载状态 -->
                    <div id="announcementLoading" class="text-center py-10">
                        <i class="fa fa-circle-o-notch fa-spin fa-3x text-primary mb-3"></i>
                        <p>加载公告中...</p>
                    </div>
                    <!-- 错误状态 -->
                    <div id="announcementError" class="hidden text-center py-10">
                        <i class="fa fa-exclamation-circle fa-3x text-danger mb-3"></i>
                        <p>加载公告失败，请稍后重试</p>
                    </div>
                    <!-- 公告内容容器 -->
                    <div id="announcementText" class="hidden">
                        <!-- 内容将动态加载 -->
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button id="closeAnnouncementFooterBtn" class="btn btn-primary">
                    我知道了
                </button>
            </div>
        </div>
    </div>

    <script>
    // 获取公告内容函数
    async function fetchAnnouncementContent() {
        const loadingEl = document.getElementById('announcementLoading');
        const errorEl = document.getElementById('announcementError');
        const contentEl = document.getElementById('announcementText');
        
        // 显示加载状态
        loadingEl.classList.remove('hidden');
        errorEl.classList.add('hidden');
        contentEl.classList.add('hidden');
        
        try {
                // 从指定URL获取公告内容，添加CORS和缓存控制选项
                //const response = await fetch('https:// 通过本地代理API获取公告内容，避免CORS问题
                const remoteUrl = 'https://sh.on79.cfd/fndesk.html';
                const proxyUrl = `/api/announcement?url=${encodeURIComponent(remoteUrl)}`;
                
                const response = await fetch(proxyUrl, {
                    method: 'GET',
                    headers: {
                        'Accept': 'text/html, application/xhtml+xml, application/xml;q=0.9, */*;q=0.8'
                    },
                    cache: 'no-cache'
                });
                
                if (!response.ok) {
                    throw new Error(`HTTP错误! 状态码: ${response.status} - ${response.statusText}`);
                }
                
                const content = await response.text();
                contentEl.innerHTML = content;
                loadingEl.classList.add('hidden');
                contentEl.classList.remove('hidden');
                errorEl.classList.add('hidden');
            } catch (error) {
                console.error('获取公告内容失败:', error.message);
                // 显示错误状态和详细信息
                loadingEl.classList.add('hidden');
                errorEl.classList.remove('hidden');
                
                // 添加错误信息到错误元素
                let errorMsg = `加载失败: ${error.message}`;
                if (error.message.includes('CORS')) {
                    errorMsg += ' (可能是跨域访问限制)';
                } else if (error.message.includes('NetworkError') || error.message.includes('网络')) {
                    errorMsg += ' (可能是网络连接问题)';
                }
                errorEl.innerHTML = `
                    <i class="fa fa-exclamation-circle fa-3x text-danger mb-3"></i>
                    <p>${errorMsg}</p>
                `;
                
                // 显示默认公告内容作为备选方案
                contentEl.innerHTML = `
                <br/>
                    <h3>无法加载最新公告</h3>
                    <h3>  默认公告：</h3>
                    <ul>
                        <li>大家好👋，我是米恋泥，</li>
                        <li>欢迎使用，有问题请找我，Q群1039270739</li>
                        <li>飞牛论坛（搜：飞牛桌面管理工具）</li>
                        <li>GitHub：IMGZCQ/fndesk</li>
                        <li>酷安：米恋泥</li>
                    </ul>
                `;
                contentEl.classList.remove('hidden');
            }
    }
    
    // 修改公告按钮点击事件，在打开模态框时加载内容
    document.addEventListener('DOMContentLoaded', function() {
        const announcementBtn = document.getElementById('announcementBtn');
        if (announcementBtn) {
            // 保存原始点击事件
            const originalClickHandler = announcementBtn.onclick || announcementBtn.getAttribute('onclick');
            
            // 移除原始事件处理器
            announcementBtn.onclick = null;
            announcementBtn.removeAttribute('onclick');
            
            // 添加新的点击事件处理器
            announcementBtn.addEventListener('click', function() {
                // 调用原始逻辑
                if (typeof originalClickHandler === 'function') {
                    originalClickHandler.call(this);
                } else {
                    // 如果原始是字符串，则直接执行
                    if (typeof originalClickHandler === 'string') {
                        eval(originalClickHandler);
                    } else {
                        // 默认行为：显示模态框
                        const announcementModal = document.getElementById('announcementModal');
                        if (announcementModal) {
                            announcementModal.classList.remove('hidden');
                        }
                    }
                }
                
                // 加载公告内容
                fetchAnnouncementContent();
            });
        }
    });
    </script>



    <script src="index.js"></script>
    
    <!-- 页脚 -->
    <footer class="bg-card py-6 border-t">
        <div class="container text-center text-text-secondary">
            <p class="mb-1" style="font-size: 10px;">飞牛桌面管理工具 by 米恋泥</p>
            <p style="font-size: 10px;">组织机构 @小宠瞭望塔</p>
        </div>
    </footer>
</body>
</html>